過去的幾天，我們一起討論了如何動態編輯 DOM 元素及樣式，這就是元素面版最常用的兩個功能，而今天要跟大家一起來探討的是在元素面版中剩下的幾個控制台，而這當中除了運算控制台我比較常用到之外，其他的都不太常用到。但是還是想說讓大家知道一下會比較好。那就讓我們開始吧！

運算控制台 (Computed panel)

這個控制台的介面裡，最上方是一個我們過去兩天有提到的區塊模型 (Box model) 模擬圖，並且功能是完全一樣，你可以像我們昨天介紹的來編輯它的長、寬，它的 margin, padding 還有 border 等。

圖 1: 運算控制台介面

在控制台的下方列出來的是"運算"過後的元素樣式。是什麼意思呢？這是說我們現在所選取的這一個元素最終被套上去的所有樣式。如果你還記得我們前面有提到，當樣式發生衝突時，瀏覽器會透過權重 (specificity) 來計算哪一個樣式會勝出並最終被套用。所以在這裡列出來的樣式，就都是最後勝出套用上，稱為運算後的樣式。

而這也是為什麼這個控制台會很方便，因為常常當我們專案中的樣式很多時，用我們前面介紹的檢視樣式方式來找最後套上到元素上的樣式是很困難的。因為整個樣式的繼承太複雜了。這時候如果你使用這個控制台來查看，就可以很快的找到你想要找的樣式。

在每個樣式屬性中如果有一個可以打開的箭頭小圖示 ，它會列出所有的衝突列表並最後套用上去的是什麼，如果你點用滑鼠左鍵點選這個值，開發者工具就會帶你到樣式控制台的那個屬性宣告中，很方便吧，快速又精確。而在屬性值後面也會列出來源的樣式表，點選後就會直接轉跳到原始碼面版的樣式宣告中。

圖 2: 打開屬性箭頭後，可以看到所有衝突列表

除此之外你可以使用右上方的顯示全部 (Show all) 來打開所有的樣式屬性及值。這裡所列出來的就會包含所有預設可用的屬性及值 (這些屬性會用較淡的顏色來表示)。這個功能通常我會關掉不然屬性太多了，有時候很難找到我想要找並且是有使用到的屬性。

圖 3: 顯示全部的樣式屬性

如果你要找特定的屬性宣告，你也可以透過上方的過濾器功能 (Filter) 來快速搜尋。

其他控制台

剩下的幾個控制台，筆者我很少用到，所以我會很快的帶過，你如果想要更深入的了解，可以參考官方文件。

• 事件監聽器 (Event Listeners)：這裡會列出所有目前所選 DOM 元素被綁定的事件，在官方文件有詳細的說明。
  
  圖 4: 事件監聽器

• DOM 元素中斷點 (DOM Breakpoints)：你可以透過新增 DOM 元素的中斷點來檢查特定事件 (Subtree modified, Node removed, Attribute modified)，官方文件裡有蠻清楚的介紹。
  
  圖 5: DOM 元素中斷點

• 屬性控制台 (Properties pane)：當你選擇了一個 DOM 元素後，在這裡就會顯示出它所有的屬性。最下面的屬性就是這個元素的祖先，也就是說，它會繼承到一些祖先物件的屬性。最後的那個物件就是元素本身。我通常要檢查一個元素的屬性時都會直接把它印出來到控制台面版 (Console panel) 或是在中斷點時檢查，所以這一個控制台我很少使用。
  
  圖 6: 屬性控制台

小結

今天就算是元素面版的總結啦，我們花了好幾天的時間一起討論了 DOM 元素的新增、編輯、修改及刪除還有移動。而這些編輯都是即時的 (Live)，可以馬上在瀏覽器裡就看到修改後的畫面。另一部份是樣式的編輯及檢視，樣式編輯跟 DOM 元素的很大的不同在於：樣式常常會有衝突，而且很多東西是繼承的，所以在修改時要先花點時間來找到你要修改的特定宣告。今天我們也花了點時間介紹幾個剩下的控制台，很多是我不太熟悉也很少用的，所以我都有補上連結，希望可以幫助到想要更深入了解的人。

經過這幾天的介紹希望大家對元素面版有一定的熟悉並且已經可以使用在現有的開發流程裡，我相信如果你知道如何善用元素面版，一定可以省下很多在原始碼編輯器裡還有瀏覽器畫面切換來切換去的時間。並且對 DOM 還有 CSS 如何在瀏覽器中運作也會有更深一點的認識。所以元素面版就介紹到這裡了，如果你有任何問題，歡迎留言，接來下我們要開始討論控制台面版了！